<template>
	<view class="pages ">
		<view class="filterBox ">
			<u-dropdown active-color="#EE7F48">
				<u-dropdown-item v-model="param.type" :title="param.type" :options="typeOptions"></u-dropdown-item>
				<u-dropdown-item v-model="param.gear" :title="param.gear" :options="gearSelector"></u-dropdown-item>
				<u-dropdown-item v-model="param.seat" :title="param.seat+'座'" :options="seatSelector"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class=" carPanel u-flex">
			<view class="right f1">
				<view class="content">
					<CarItems v-for="(rent, index) in rentList" :key="index" :rent="rent"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CarItems from '@/components/CarItems.vue'
	export default {
		data() {
			return {
				rentList:[],
				typeOptions: [
					{label: '全部',value: '全部'},
					{label: '轿车',value: '轿车'},
					{label: 'SUV',value: 'SUV'},
					{label: 'MPV',value: 'MPV'},
					{label: '跑车',value: '跑车'},
					{label: '越野汽车',value: '越野汽车'},
					{label: '皮卡',value: '皮卡'}
				],
				gearSelector: [
					{label: '全部',value: '全部'},
					{label: '液力自动',value: '液力自动'},
					{label: '机械无级自动',value: '机械无级自动'},
					{label: '电控机械自动',value: '电控机械自动'},
					{label: '双离合',value: '双离合'},
					{label: '手动',value: '手动'},
				],
				seatSelector: [
					{label: '1',value: '1'},
					{label: '2',value: '2'},
					{label: '3',value: '3'},
					{label: '4',value: '4'},
					{label: '5',value: '5'},
					{label: '6',value: '6'},
				],
				param:{
					type:'全部',
					gear:'全部',
					seat:''
				},
				option:undefined
			};
		},
		onLoad(option) {
			const sys = uni.getSystemInfoSync()
			this.option=option
			this.getRentList()
		},
		components:{
			CarItems
		},
		watch:{
			'param.type':{
				handler(newVal, oldVal) {
					this.getRentList()
				},
			},
			'param.gear':{
				handler(newVal, oldVal) {
					this.getRentList()
				},
			},
			'param.seat':{
				handler(newVal, oldVal) {
					this.getRentList()
				},
			},
        },
		methods:{
			getRentList(){
				Object.assign(this.param,this.option)
				console.log(this.param)
				this.$api.getRentList(this.param).then(res=>{
					this.rentList=res.result
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #fff;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.header {
			width: 100%;
			padding: 20rpx;

			.result {
				background-color: #f8f8f8;
				padding: 20rpx;
				border-radius: 12rpx;
				text-align: center;
				width: 100%;

				.cm_title {
					line-height: 2;
				}

				.line {
					width: 70%;
					height: 1rpx;
					background-color: #b4b4b4;

					margin: 0 auto;
					margin-top: 20rpx;
					box-sizing: border-box;
				}
			}

		}

		.filterBox {
			width: 100%;
			.carBrandBar{
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0 30rpx;
				.carBrand{
					width:214rpx;
					text-align: center;
					// padding: 20rpx;
					height: 72rpx;
					line-height: 72rpx;
					border-radius: 8rpx;
					background-color: #F4F5F6;
					margin-bottom: 16rpx;
					.icons{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
				}
				
			}
			.filteritems{
				.cm_title{
					line-height: 2;
					padding-left: 30rpx;
					margin-bottom: 20rpx;
				}
			}
			.footer{
				height: 98rpx;
				width: 100%;
				line-height: 98rpx;
				text-align: center;
				.btns{
					height: 98rpx;
					line-height: 98rpx;
					text-align: center;
					background-color: #f8f8f8;
				}
				.sure{
					background: #EE7F48;
					color: #fff;
				}
			}
		}

		.carPanel {
			width: 100%;
			border-top: 1rpx solid #f8f8f8;
			// background: red; 
			position: absolute;
			left: 0;
			top: 80rpx;
			bottom: 0;

			.left {
				width: 188rpx;
				height: 100%;

				.leftItems {
					height: 98rpx;
					line-height: 98rpx;
					text-align: center;
					border-bottom: 1rpx solid #f8f8f8;
				}

				.active {
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 12rpx;
						height: 100%;
						background-color: #EE7F48;
					}
				}
			}

			.right {
				height: 100%;
				background: #f8f8f8;
				padding: 16rpx;
			}
		}
	}
</style>
